<!DOCTYPE html>
<!-- ng-app -->
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../../js/plugins/angular/angular.min.js" type="text/javascript"></script>
    <style>
        body{
            font-size: 12px;
        }
        ul{
            list-style-type: none;
            width: 408px;
            margin: 0;
            padding: 0;
        }
        ul li{
            float: left;
            padding: 5px 0;
        }
        ul .odd{
            color: #0026ff;
        }
        ul .even{
            color: #ff0000;
        }
        ul .bold{
            font-weight: bold;
        }
        ul li span{
            width: 52px;
            float: left;
            padding: 0 10px;
        }
        ul .focus{
            background: red;
        }
    </style>
</head>
<body>
    <div ng-controller="cont">
        <ul>
            <li ng-class="{{bold}}">
                <span>序号</span>
                <span>姓名</span>
                <span>性别</span>
                <span>是否首条</span>
                <span>是否尾条</span>
            </li>
            <li ng-repeat="stu in data" ng-class-odd="'odd'" ng-class-even="'event'" ng-click="li_click($index)" ng-class="{focus:$index == focus}">
                <span>{{$index+1}}</span>
                <span>{{stu.name}}</span>
                <span>{{stu.sex}}</span>
                <span>{{$first? '是' : '否'}}</span>
                <span>{{$last? '是' : '否'}}</span>
            </li>
        </ul>
    </div>
    <script>
        var app = angular.module('app',[]);
        app.controller('cont',['$scope',function ($scope) {
            $scope.bold = "bold";
            $scope.li_click = function (i) {
                console.log('i=' + i);
                $scope.focus = i;
            }

            $scope.data = [
                { name:"明明",sex:"女" },
                { name:"张张",sex:"男" },
                { name:"哈哈",sex:"女" },
                { name:"呵呵",sex:"女" }
            ]
        }])
    </script>
</body>
</html>